<template>
  <div class="wrap_item" @click="toCourse">
    <div class="img_zhezhao">
      <img :src="baseurl + item.albumCoverPath" class="wrap_img" />
    </div>
    <div class="wrap_img_text">
      <img src="../../../assets/icons/play_icon.png" class="wrap_icon" />
      <div class="wrap_img_text1">
        {{ albumPlayCount }}
      </div>
    </div>
    <div class="text-container">
      <p class="wrap_text ellipsis-text">{{ item.albumTitle }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { createApp, ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
const $router = useRouter();

const baseurl = "https://imagev2.xmcdn.com/";
const props = defineProps<{
  item: any;
}>();

const formatNumber = (number: number) => {
  if (number >= 100000000) {
    return (number / 100000000).toFixed(2) + " 亿";
  } else if (number >= 10000) {
    return (number / 10000).toFixed(2) + " 万";
  } else {
    return number.toString();
  }
};
const albumPlayCount = computed(() => {
  let albumPlayCount = formatNumber(props.item.albumPlayCount);
  return albumPlayCount;
});

const toCourse = () => {
  $router.push({
    name: "Course",
    params: {
      albumId: props.item.albumId,
    },
    query: {
      anchorId: props.item.anchorId,
      userNickname: props.item.albumUserNickName,
    },
  });
};
</script> 

<style scoped lang="less">
.wrap_item {
  width: 103px;
  height: 173px;
}
.img_zhezhao {
  position: relative;
  float: left;
  top: 10px;
  width: 103px;
  height: 103px;
  border-radius: 8px;
  display: block;
  background-color: #050000;
  z-index: 20;
}
.wrap_img {
  position: absolute;
  width: 103px;
  height: 103px;
  border-radius: 6px;
  opacity: 0.9;
}
.wrap_icon {
  width: 15px;
  height: 15px;
  position: relative;
  left: -38px;
}
.wrap_img_text{
  float: left;
  position: relative;
  top: -12px;
  width: 103px;
  height: 28px;
  font-size: 12px;
  text-align: center;
  line-height: 28px;
  color: #fff;
  z-index: 100;
}
.wrap_img_text1 {
  position: relative;
  top: -30px;
  color: #fdfbfb;
}
.wrap_text {
  width: 103px;
  height: 53px;
  font-size: 13px;
  color: #333;
  margin-top: 90px;
}
.text-container p {
  width: 100px; /* 调整容器宽度 */
  height: 26px;
  overflow: hidden;
}
.ellipsis-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
</style>
